<template>
  	<div id="modifyPassword">
  		<header>
  			<i @click="goBack()"></i>
  			<div>密码修改</div>
  		</header>
  		<ul>
            <li>
                <a>
                    <img src="../../image/icon_phone.png" width="20" height="20" alt="">
                    <input type="text" placeholder="请输入手机号" v-model="phone"  @input="checkNum" required />
                </a>
            </li>
            <li>
                <a>
                    <img src="../../image/icon_verification_code.png" width="20" height="20" alt="">
                    <input type="text" placeholder="请输入验证码" v-model="code" required @click="testPhone" />
                    <span @click='getCode()' v-show='!hasCode'>获取验证码</span>
                    <span v-show='hasCode'>重新获取{{count}}s</span>
                </a>
            </li>
	  		<li>
	  			<a>
					<img src="../../image/icon_new_password.png" width="20" height="20" alt="">
		 			<input type="password" placeholder="请输入新密码" v-model="newPass" required />
	  			</a>
	  		</li>
	  		<li>
	  			<a>
					<img src="../../image/icon_confirm_password.png" width="20" height="20" alt="">
		 			<input type="password" placeholder="请再次确认新密码" v-model="confirmPass" required />
	  			</a>
	  		</li>
	  		<li>
	  			<a class="confirmBtn" @click="confirmFun()">
                      <!-- 确定	 -->
                      <img src="../../image/sure.png" alt="">
	  			</a>
	  		</li>
	  	</ul>
	</div>
</template>
<script>
	export default {
		data() {
			return {
                phone: '',
				newPass: '',
				confirmPass: '',
                code: '',
                hasCode: false, //是否有验证码 默认无 发送后一分钟内是true 然后false
                time_count: 60, //倒计时时间
                count: '',  //60s倒计时
                timer: null,  //计时器
			}
		},
		components: {
			
		},
		methods: {
			goBack() {
				this.$router.push({path:'setting'});
			},
            //校验手机号
	        checkNum(e){
		        var value = e.target.value;
		        e.target.value = value.replace(/[^\d]/g, '');
		        this.phone = e.target.value;
            },
            //点击获取验证码
            getCode() {
                if (this.phone == "") {
			        this.$utils._toast("手机号不能为空");
			        return false;
		        } else if (!/^1(3|4|5|7|8|9)\d{9}$/.test(this.phone)) {
		        	this.$utils._toast("手机号码有误，请重填");
		        	return false;
                } else {  //手机号码有效
                    if(!this.timer) {
                        const obj = {phone: this.phone};
                        this.$api.post(this.$api.baseURLSchool,"send_code/modify",obj,r => {
                            console.log(r);
                            if(r.data.ret == 1) {  //验证码发送成功后开始60s倒计时
                                this.count = this.time_count;
                                this.hasCode = true;
                                this.timer = setInterval(() => {
                                    if (this.count > 0 && this.count <= this.time_count) {
                                        this.count--;
                                    } else {
                                        this.hasCode = false;
                                        clearInterval(this.timer);
                                        this.timer = null;
                                    }
                                }, 1000)
                            }else if(r.data.ret == -1){
                                this.$utils._toast('获取验证码频繁，请稍后再试');
                            }            
                        },err => {
                            console.log(err);
                        })
                    }     
                }    
            },
            testPhone(){
		        if (this.phone == "") {
			        this.$utils._toast("手机号不能为空");
			        return false;
		        } else if (!/^1(3|4|5|7|8|9)\d{9}$/.test(this.phone)) {
		        	this.$utils._toast("手机号码有误，请重填");
		        	return false;
		        }
		    },
            //确定密码修改
			confirmFun() {
                if (!this.phone) {
			        this.$utils._toast("手机号不能为空");
			        return false;
		        } else if (!/^1(3|4|5|7|8|9)\d{9}$/.test(this.phone)) {
		        	this.$utils._toast("手机号码有误，请重填");
		        	return false;
                } else if (!this.code) {
                    this.$utils._toast("验证码不能为空");
		        	return false;
                } else if(!this.newPass) {
                    this.$utils._toast("密码不可为空");
                    return false;
				} else if(!this.confirmPass) {
                    this.$utils._toast("请再次确认新密码");
                    return false;
				} else if(this.newPass != this.confirmPass) {
					this.$utils._toast('两次密码不一致');
					return false;
				}else {
                    //修改密码
                    const data = {
                        tele: this.phone,
                        pass: this.newPass
                    };
                    console.log(data);
                    this.$api.post(this.$api.baseURLSchool,"phone/pass_reset/"+this.code,data,r => {
                        console.log(r);
                        if(r.data.ret == 1) {  //验证码发送成功后开始60s倒计时
                            this.$utils._toast('密码重置成功,1s后跳转');
                            const that = this;
                            setTimeout(function() {
					    	    // that.$router.push({name:'login2'});
                                that.$router.push({path:'setting'})
                            },1000);
                        }else if(r.data.ret == -1){
                            this.$utils._toast('验证码错误');
                        }        
                    },err => {
                        console.log(err);
                    })
                }
			}
		},
		created() {
			
		}
	}
</script>
<style lang="scss">
</style>
